body{background-color: #F1F1F1;}
.main-page{ margin: 0 auto;color: #333;background-color: #F1F1F1;font-family: 'HiraginoSansGB-W3','Microsoft YaHei','微软雅黑','SimSun','宋体','PingFang SC','STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif;}

.header{height:45px;display: -webkit-box;display: -moz-box;display: flex;display:-webkit-flex;background-color:#FF9B14 ;background-image:-webkit-linear-gradient(to bottom, #FFC149, #FF9B14); background-image:linear-gradient(to bottom,#FFC149, #FF9B14);}
.header .title{-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow:1;flex-grow:1;width: 0;text-align: center;line-height: 45px;font-size: 18px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #fff;}
.header .head-tap{display: block;width: 56px;padding: 0 20px;line-height: 45px; color: #fff;font-size: 14px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.head-icon{display: inline-block;background: url("../images/header.png") no-repeat;background-size: 16px auto;}
.header .head-left{width: 8px;height: 15px;margin: 15px 0;background-position: -4px -1px}

.content{padding:10px;position: relative;overflow: hidden}
.content:before,.content:after{content: "";display: block; width: 9px;height: 30px;background: #f1f1f1;position: absolute;top:56px;z-index: 100}
.content:before{left: 0;}
.content:after{right: 0;}
.receipt{background-color: #fff;-webkit-border-radius: 3px;border-radius: 3px;position: relative;-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);box-shadow: 0 0 5px rgba(0,0,0,.2)}
.receipt:before,.receipt:after{content: "";display: block; width: 25px;height: 25px;background: #f1f1f1;-webkit-border-radius: 50%;border-radius: 50%;position: absolute;
 top:49px;box-shadow: 0 0 5px rgba(0,0,0,.2) inset;z-index: 1;
}
.receipt:before{left: -13px}
.receipt:after{right: -13px}
.receipt .title{height: 60px;line-height:60px;font-size: 20px;border-bottom: 1px solid #f1f1f1;color: #ffaf30;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.receipt .pay-code{text-align: center;padding: 40px 0;}
.receipt .pay-code image{width: 150px;}
.receipt .pay-code figcaption{margin-top: 6px;font-size: 14px;color: #999}
.receipt-way {display: -webkit-box;display: -moz-box;display: flex;display:-webkit-flex;padding: 20px 0}
.receipt-way .receipt-tap{display: block;-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow:1;flex-grow:1;width: 0;text-align: center;line-height: 37px;font-size:14px;color: #999}
.pay-icon{display: inline-block;height:37px;width:37px;margin-right: 5px;vertical-align: middle;background: url("../images/payWay.png") no-repeat;background-size: 86px auto;}
.icon-zhi{background-position: 0 0;}.icon-wei{background-position:-49px 0;}
.remark{ margin: 20px 0 20px;font-size: 20px;color: #cbcbcb;text-align: center;}

@media (min-width: 350px){
    .receipt-way{padding:50px 0}
    .remark{margin: 30px 0 30px}
}
.btn-wrapper{text-align: center}
.savePic{height: 50px;width: 80%;font-size: 14px;line-height: 50px;color: #fff;border: 0;outline: 0;
    background-color:#ff9b15 ;background-image:-webkit-linear-gradient(to bottom, #ffc149, #ff9b15); background-image:linear-gradient(to bottom,#FFC149, #ff9b15);
    -webkit-border-radius: 5px;border-radius: 5px;
    -webkit-box-shadow: 0 0 5px rgba(255,158,26,.6);
    box-shadow: 0 0 5px rgba(255,158,26,.6);
}
